<template>
  <div class="student-management-page">
    <!-- 头部 -->
    <div class="header d-flex align-items-center">
<!--      <router-link to="/groups" class="text-dark">-->
<!--        <i class="bi bi-chevron-left fs-4"></i>-->
<!--      </router-link>-->
      <h5 class="mb-0 mx-auto">学生管理列表</h5>
    </div>
    <!-- 搜索框 -->
    <!--    <div class="form-group">
      <label for="student-search">搜索学生</label>
      <input v-model="searchQuery" id="student-search" class="form-control" placeholder="输入学生姓名或学号">
    </div> -->
    <!-- 学生列表 -->
    <div class="student-container">
      <div v-if="students.length === 0" class="empty-message text-center py-5">
        暂无学生信息
      </div>
      <div v-else class="student-list" >
        <div v-for="student in students"
             :key="student.id"
             class="student-item"
             @click="goToDetail(student.id)">
          <div class="student-content">
            <div class="d-flex justify-content-between align-items-start">
              <h6 class="student-name mb-2">
                {{ student.name }}
              </h6>
              <small class="text-muted">{{ student.studentId }}</small>
            </div>
            <div class="student-info mb-0">
              性别：{{ student.grade }}，年龄：{{ student.class }}
            </div>
          </div>
        </div>
      </div>
    </div>
    <!-- 分页按钮 -->
    <div class="pagination d-flex justify-content-center mt-3">
      <button @click="prevPage" :disabled="currentPage === 1" class="btn btn-outline-secondary mr-2">上一页</button>
      <button @click="nextPage" :disabled="currentPage === totalPages" class="btn btn-outline-secondary">下一页</button>
    </div>

    <div class="bottom-nav">
      <div class="d-flex justify-content-around">
        <div class="text-center">
          <router-link to="/groups" class="text-decoration-none text-dark">
            <i class="bi bi-nut"></i>
            <div>群组</div>
          </router-link>
        </div>
        <div class="text-center">
          <router-link to="/students" class="text-decoration-none text-dark">
            <i class="bi bi-person-fill-dash"></i>
            <div>学生</div>
          </router-link>
        </div>
        <div class="text-center">
          <router-link to="/qaT" class="text-decoration-none text-dark">
            <i class="bi bi-chat-dots"></i>
            <div>答疑</div>
          </router-link>
        </div>
        <div class="text-center">
          <router-link to="/profileT" class="text-decoration-none text-dark">
            <i class="bi bi-person"></i>
            <div>我的</div>
          </router-link>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import http from "@/router/http";

export default {
  name: 'StudentManagementList',
  data() {
    return {
      students: [
      ],
      searchQuery: '',
      currentPage: 1, // 当前页码，初始化为1
      pageSize: 6, // 每页显示的记录数
      totalPages: 0 // 总页数
    };
  },
  computed: {
    // filteredStudents() {
    //   const query = this.searchQuery.toLowerCase();
    //   return this.students.filter(student => {
    //     return student.name.toLowerCase().includes(query) || student.studentId.includes(query);
    //   });
    // }
  },
  mounted() {
    // this.calculateTotalPages();
    this.fetchStudents();
  },
  methods: {
    //查询学生列表
    async fetchStudents(userName) {
      try {
        const reqestData = {
          pageIndex: this.currentPage,
          pageSize: this.pageSize,
          role: 1,
          userName: userName,
          supervision: 1,
        };
        const response = await http.post(`/admin/user/page/list`,reqestData);
        this.students = [];
        // 假设后端接口返回的数据格式包含data和total两个字段
        const  total  = response.data.response.total;
        const  data = response.data.response.list;
        data.forEach(item => {
          this.students.push({
            id: item.userId,
            name: item.realName?item.realName:item.userName,
            grade: item.sex===null?'':item.sex===1?'男':'女',
            class: item.age
          })
        })
        this.totalPages = Math.ceil(total / this.pageSize);
      } catch (error) {
        console.error('获取消息列表数据失败：', error);
      }
    },
    // calculateTotalPages() {
    //   this.totalPages = Math.ceil(this.filteredStudents.length / this.pageSize);
    // },
    prevPage() {
      if (this.currentPage > 1) {
        this.currentPage--;
        this.fetchStudents();
      }
    },
    nextPage() {
      if (this.currentPage < this.totalPages) {
        this.currentPage++;
        this.fetchStudents();
      }
    },
    goToDetail(userId) {
      // this.markAsRead(messageId)
      this.$router.push(`/students-report/${userId}`)
    }
  }
};
</script>

<style scoped>
/* 整体布局 */
body {
  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
  background: linear-gradient(135deg, #f0f9f9 0%, #d8e9f9 100%);
  color: #333;
  margin: 0;
  padding: 0;
}
.header .bi-chevron-left {
  color: white;
  transition: color 0.3s ease;
}
/* 头部样式 */
.header {
  background: linear-gradient(135deg, #00b8a9 0%, #28df99 100%);
  color: white;
  padding: 15px 20px;
}
.bottom-nav {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  background: white;
  padding: 10px 0;
  border-top: 1px solid #eee;
  z-index: 1000;
}
.student-container {
  margin-top: 10px;
  /* 使用flex布局，让列表信息占据剩余的空间 */
  display: flex;
  flex-direction: column;
  height: calc(100vh - 200px); /* 减去头部和底部导航栏的高度 */
}

.student-item {
  border: 1px solid #ddd;
  border-radius: 5px;
  padding: 10px;
  margin-bottom: 10px;
  background-color: white;
}

.student-name {
  font-weight: bold;
}

.student-info {
  color: #666;
}


</style>